<template>
	<basic-container class="baseContain">
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
			<el-menu-item index="0"><a>当前类目</a></el-menu-item>
			<el-menu-item index="1"><a>基本信息</a></el-menu-item>
			<el-menu-item index="2"><a>自然属性</a></el-menu-item>
			<el-menu-item index="3"><a>销售属性</a></el-menu-item>
			<el-menu-item index="4"><a>店铺分类</a></el-menu-item>
			<el-menu-item index="5"><a>物流信息</a></el-menu-item>
			<el-menu-item index="6"><a>详情描述</a></el-menu-item>
			<el-menu-item index="7"><a>其他信息</a></el-menu-item>
		</el-menu>
		<div class="scrollView" @scroll="contentScroll" ref="contentScroll">
			<avue-form ref="obj" :rules="avueformRules" v-model="groupData" :option="optionView" style="padding-top: 15px;">
				<template slot="menuForm">
					<el-button v-if="!isCheck" type="primary" :loading="submitLoading" size="mini" :disabled="isDisabled" @click="handleSubmit">提交</el-button>
				</template>
				<!-- 当前类目 -->
				<template slot="group1Header">
					<h1 class="avue-group__title">当前类目:</h1>
					<span style="fontSize:12px;margin:0 30px 0 10px;">{{ goodsclassname }}</span>
					<el-button type="primary" size="mini" :disabled="isCheck || isRedact" @click.stop="chooseCategory">选择类目</el-button>
				</template>
				<!-- 商品图片 -->
				<template slot="goodsPhotos">
					<div class="imgContainer">
						<div class="upload">
							<el-button size="mini" :disabled="isCheck" type="primary" @click="uploadbtn">上传图片</el-button>
							<p class="tsmsg">最多可发布5张照片，尺寸750*750</p>
						</div>
						<div class="previewPic">
							<div class="demo-image__preview" style="margin-right:10px" v-for="(item, index) in groupData.goodsPhotos" :key="index">
								<el-image :src="item" style="width: 100px; height: 100px"></el-image>
								<div class="handlebox">
									<div v-if="!isCheck">
										<img @click="arrowLeft(index)" :src="require('../../../../../public/img/placeholderimg/arrow_left.png')" />
										<img @click="arrowDel(index)" :src="require('../../../../../public/img/placeholderimg/arrow_del.gif')" />
										<img @click="arrowRight(index)" :src="require('../../../../../public/img/placeholderimg/arrow_right.png')" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>

				<!-- 商品视频 -->
				<template slot="goodsVideo">
					<div class="imgContainer">
						<div class="upload">
							<el-button size="mini" :disabled="isCheck" type="primary" @click="uploadVideoBtn">上传视频</el-button>
							<p class="tsmsg">只能发布一个视频</p>
						</div>
						<div class="previewPic">
							<div class="demo-image__preview" style="margin-right:10px" v-for="(item, index) in groupData.goodsVideo" :key="index">
								<video :src="item" class="avatar" controls="controls"></video>
								<div class="handlebox">
									<div v-if="!isCheck"><img @click="videoDel(index)" :src="require('../../../../../public/img/placeholderimg/arrow_del.gif')" /></div>
								</div>
							</div>
						</div>
					</div>
				</template>
				<!-- 店铺分类 -->
				<template slot="userGoodsClassId">
					<div class="storebox">
						<el-button type="primary" style="marginRight:20px;" size="mini" :disabled="isCheck" @click="goodsClassOpen">新增分类</el-button>
						<el-cascader v-model="value" :disabled="isCheck" :options="cascaderoptions"></el-cascader>
					</div>
				</template>
				<!-- 运费模板 -->
				<template slot="transportId">
					<div style="display:flex;">
						<el-select @change="getTransType" v-model="groupData.transportId" :disabled="isCheck" placeholder="请选择">
							<el-option v-for="(item, index) in templateFreightData" :key="index" :label="item.transName" :value="item.id"></el-option>
						</el-select>
						<el-button style="marginLeft:20px" size="mini" type="primary" :disabled="isCheck" @click="templateFreightHandle">新增运费模板</el-button>
					</div>
				</template>
				<!-- 商品属性 -->
				<template slot="productsize">
					<div class="sizebox">
						<div class="fromRow ">
							<div class="Name">长度：</div>
							<el-input style="width:100px;margin-right:5px;" type="number" min="0" size="mini" :disabled="isCheck" v-model="groupData.goodsLength"></el-input>
							<i>cm</i>
						</div>
						<div class="fromRow ">
							<div class="Name">宽度：</div>
							<el-form :rules="goodsWidthRules">
								<el-input
									style="width:100px;margin-right:5px;"
									type="number"
									min="0"
									precision="2"
									size="mini"
									:disabled="isCheck"
									prop="goodsWidth"
									v-model="groupData.goodsWidth"
								></el-input>
							</el-form>
							<i>cm</i>
						</div>
						<div class="fromRow ">
							<div class="Name">高度：</div>
							<el-input
								style="width:100px;margin-right:5px;"
								type="number"
								min="0"
								:precision="2"
								size="mini"
								:disabled="isCheck"
								v-model="groupData.goodsHeight"
							></el-input>
							<i>cm</i>
						</div>
						<div class="fromRow ">
							<div class="Name">体积：</div>
							<el-input style="width:100px;margin-right:5px;" size="mini" :precision="2" min="0" readonly :disabled="isCheck" v-model="goodsVolume"></el-input>
							<i>dm3</i>
						</div>
						<div class="fromRow ">
							<div class="Name">重量：</div>
							<el-input
								style="width:100px;margin-right:5px;"
								type="number"
								:precision="2"
								minRows="0"
								min="0"
								size="mini"
								:disabled="isCheck"
								v-model="groupData.goodsWeight"
							></el-input>
							<i>kg</i>
						</div>
					</div>
				</template>
				<!-- 商品描述pc -->
<!--				<template slot="goodsDetails">-->
<!--					<editor v-if="editorshow" :isCheck="isCheck" @getContent="getEditcont" prop="goodsDetails" :cabackcontent="cabackcontent"></editor>-->
<!--				</template>-->
				<!-- 商品描述h5 -->
				<template slot="goodsDetailsH5">
					<editor style="width:375px" v-if="editorshow" :isCheck="isCheck" @getContent="getEditconth5" prop="goodsDetailsH5" :cabackcontent="cabackcontenth5"></editor>
				</template>
			</avue-form>
		</div>
		<!-- 选择类目弹窗 -->
		<change-goods-class ref="changeGoods" :isPublish="isPublish" @callback="changeclassdata" :isRedact="isRedact"></change-goods-class>
		<sel-file
			ref="selFile"
			@callback="selFileCallBack"
			imgNum="5"
			albumCode="store"
			dialogTitle="选择图片"
			selectType="checkbox"
			selMaxWidth="300px"
			selMaxHeight="300px"
		></sel-file>
		<sel-file ref="selVideo" @callback="selVideoCallBack" albumCode="store" dialogTitle="选择视频" selMaxWidth="300px" selMaxHeight="300px" resType="video"></sel-file>
		<sel-file ref="specimg" @callback="specChooseimg" albumCode="store" dialogTitle="选择图片" selectType="radio" selMaxWidth="300px" selMaxHeight="300px"></sel-file>
		<el-dialog title="新增分类" :visible.sync="dialogTableVisible" width="80%"><goods-class v-if="dialogTableVisible"></goods-class></el-dialog>
		<el-dialog title="商品发布成功" :visible.sync="dialogSuccessVisible" append-to-body width="30%" :close-on-click-modal="false" :show-close="false">
			<div class="boxSuccess">
				<p class="icon-success icon-dui"></p>
				<p class="tip-success">发布成功</p>
				<router-link to="/base/integral/seller/addIntegralGoods" @click.native="keepOnPost" style="margin-right: 30px;">继续发布商品</router-link>
				<router-link to="/base/integral/seller/goods">查看商品</router-link>
			</div>
		</el-dialog>
		<template-freight ref="templatefre" whichType="addTransport" @success="addsuccess"></template-freight>
	</basic-container>
</template>
<script>
import {
	getGoodsBrand, //请求商品分类接口
	loadClassSpec,
	getStoreCate,
	getsupplierlist,
	gettemplateFre,
	addIntegralGoods,
	getProductdata,
	getProductdataInfo
} from '@/api/base/goods/addGoods';
import { viewTemplate } from '@/api/base/store/seller/transport';
import changeGoodsClass from '@/components/goods/seller/changeGoodsClass';
import selFile from '@/components/file/selFile';
import goodsClass from '@/views/base/goods/seller/goodsClass';
import editor from '@/components/editor/richTextEditor';
import templateFreight from '@/components/goods/seller/templateFreight';
import { testIntegralPrice, testGoodsWidth, testGoodsSerial, testGoodsSort, testGoodsInventory ,testPirce} from '@/util/util';

export default {
	name: 'addGoods',
	props: {
		isPublish: {
			//是否发布
			type: Boolean,
			default() {
				return true;
			}
		},
		isCheck: {
			//是否查看
			type: Boolean,
			default() {
				return false;
			}
		},
		isRedact: {
			//是否编辑
			type: Boolean,
			default() {
				return false;
			}
		},
		disadledSpec: {
			type: Boolean,
			default() {
				return false;
			}
		},
		goodsId: {
			type: String
		}
	},
	components: {
		changeGoodsClass,
		selFile,
		goodsClass,
		editor,
		templateFreight
	},
	computed: {
		goodsVolume() {
			//计算体积
			let tj = null;
			if (this.groupData['goodsLength'] != null && this.groupData['goodsWidth'] != null && this.groupData['goodsHeight'] != null) {
				tj = (this.groupData['goodsLength'] * this.groupData['goodsWidth'] * this.groupData['goodsHeight']) / 1000;
				tj = tj.toFixed(2);
			}
			return tj;
		}
	},
	data() {
		return {
			isDisabled: false,
			transType: '', //运费模板类型
			goodsStoreId:"",//商品所在的店铺id
			submitLoading: false,
			avueformRules: {},
			editorshow: false,
			//cabackcontent: '',
			cabackcontenth5: '',
			checked: true,
			goodsclassname: '',
			dialogSuccessVisible: false,
			dialogTableVisible: false, //选择商品分类弹窗
			goodsClassId: null, //商品分类id
			value: [],
			cascaderoptions: [],
			optionView: {
				//表单组配置
				card: true,
				size: 'mini',
				mock: false,
				submitBtn: false,
				emptyBtn: false,
				menuPostion: 'right',
				labelWidth: '100',
				group: [
					{
						prop: 'group1'
					},
					{
						label: '基本信息',
						prop: 'group2',
						column: [
							{
								disabled: this.isCheck,
								label: '商品名称',
								prop: 'goodsName',
								formslot: false,
								maxlength: 50,
								required: true,
								tip: '商品标题名称长度至少1个字符，最长50个汉字',
								tipPlacement: 'bottom',
								span: 12,
								rules: [{ required: true, message: '必须填写商品名称', trigger: 'blur' }]
							},
							{
								disabled: this.isCheck,
								label: '商品品牌',
								prop: 'goodsBrandId',
								type: 'select',
								formslot: false,
								dicData: [],
								required: true
							},
							{
								disabled: this.isCheck || this.disadledSpec,
								type: 'radio',
								label: '商品类型',
								span: 24,
								display: true,
								prop: 'choiceType',
								tipPlacement: 'right',
								dicData: [
									{
										label: '实物商品',
										value: 0
									},
									{
										label: '虚拟商品(充值卡、消费券等属于虚拟商品)',
										value: 1
									}
								]
							},
							{
								label: '商品图片',
								prop: 'goodsPhotos',
								formslot: true,
								span: 24,
								rules: [{ required: true, message: '必须选择商品图片' }]
							},
							{
								label: '商品视频',
								prop: 'goodsVideo',
								formslot: true,
								span: 24
							}
						]
					},
					{
						prop: 'group3',
						label: '自然属性',
						column: []
					},
					{
						prop: 'group4',
						label: '销售属性',
						column: [
							{
								disabled: this.isCheck || this.disadledSpec,
								type: 'radio',
								label: '库存配置',
								span: 13,
								display: false,
								value:'all',
								prop: 'inventoryType',
								tip: '全局配置表示所有规格无单独库存、价格配置 规格配置需要配置对应属性的库存、价格',
								tipPlacement: 'right',
								dicData: [
									{
										label: '全局配置',
										value: 'all'
									},
									{
										label: '规格配置',
										value: 'spec'
									}
								]
							},
							{
								label: '商品编号',
								disabled: this.isCheck,
								prop: 'goodsSerial',
								formslot: false,
								maxlength: 50,
								required: true,
								display: true,
								tip: '商品编号是指卖家个人管理商品的编号，买家不可见 最多可输入50个字符，支持输入中文、字母、数字、_、/、-和小数点',
								tipPlacement: 'right',
								span: 13,
								rules: [
									{ required: true, message: '必须填写商品编号' },
									{ required: true, trigger: 'blur', validator: testGoodsSerial }
									// testGoodsSerial
								]
							},
							{
								label: '商品库存',
								disabled: this.isCheck || this.isRedact,
								prop: 'goodsInventory',
								type: 'input',
								minRows: 0,
								formslot: false,
								maxlength: 50,
								required: true,
								display: true,
								tip: '商品库存数量只能是0-1000000之间的整数',
								tipPlacement: 'right',
								span: 13,
								rules: [{ required: true, message: '必须填写商品库存' }, { required: true, trigger: 'blur', validator: testGoodsInventory }]
							},
							{
								disabled: this.isCheck,
								label: '积分',
								prop: 'price',
								precision: 0,
								formslot: false,
								maxlength: 50,
								required: true,
								display: true,
								tip: '积分必须是0-99999999之间的整数',
								tipPlacement: 'right',
								span: 13,
								rules: [{ required: true, message: '必须填写商品积分' }, { required: true, trigger: 'blur', validator: testIntegralPrice }]
							},
							{
								disabled: this.isCheck,
								label: '原价',
								prop: 'originalPrice',
								precision: 2,
								formslot: false,
								maxlength: 50,
								required: true,
								display: true,
								tip: '商品价格只能是0.01-99999999.99之间的数字',
								tipPlacement: 'right',
								span: 13,
								rules: [{ required: true, message: '必须填写商品原价' }, { required: true, trigger: 'blur', validator: testPirce }]
							},
							{
								disabled: this.isCheck,
								label: '进货价',
								prop: 'purchasePrice',
								precision: 2,
								formslot: false,
								maxlength: 50,
								required: true,
								display: true,
								tip: '商品进货价格只能是0.01-99999999.99之间的数字',
								tipPlacement: 'right',
								span: 13,
								rules: [{ required: true, message: '必须填写商品进货价' }, { required: true, trigger: 'blur', validator: testPirce }]
							},
							{
								prop: 'goodsSpecConfig',
								formslot: true,
								display: false,
								span: 24
							}
						]
					},
					{
						prop: 'group5',
						label: '店铺分类',
						column: [
							{
								prop: 'userGoodsClassId',
								label: '本店分类',
								formslot: true,
								display: true
							}
						]
					},
					{
						prop: 'group6',
						label: '物流信息',
						column: [
							{
								disabled: this.isCheck,
								type: 'radio',
								display: true,
								span: 24,
								label: '供货方式',
								prop: 'isSelfSupply',
								dicData: [
									{
										label: '自供货',
										value: 0
									},
									{
										label: '供货商',
										value: 1
									}
								]
							},
							{
								label: '供货商',
								disabled: this.isCheck,
								formslot: false,
								display: false,
								span: 12,
								prop: 'supplierId',
								type: 'select',
								dicData: []
							},
							{
								label: '运费模板',
								formslot: true,
								display: true,
								span: 12,
								prop: 'transportId'
							},
							{
								display: true,
								label: '商品属性',
								prop: 'productsize',
								formslot: true,
								span: 24
							}
						]
					},
					{
						prop: 'group7',
						label: '详情描述',
						column: [
							// {
							// 	disabled: this.isCheck,
							// 	label: 'PC商品描述',
							// 	formslot: true,
							// 	labelWidth: '130',
							// 	span: 24,
							// 	prop: 'goodsDetails',
							// 	rules: [{ required: true, message: '必须填写PC商品描述' }]
							// },

							{
								disabled: this.isCheck,
								label: 'H5商品描述',
								formslot: true,
								labelWidth: '130',
								span: 24,
								prop: 'goodsDetailsH5',
								rules: [{ required: true, message: '必须填写H5商品描述' }]
							}
						]
					},
					{
						prop: 'group8',
						label: '其他信息',
						column: [
							//商品发布页面的商品推荐是店铺推荐storeRecommend
							// {
							// 	disabled: this.isCheck,
							// 	type: 'radio',
							// 	display: true,
							// 	span: 24,
							// 	label: '商品推荐',
							// 	prop: 'storeRecommend',
							// 	dicData: [
							// 		{
							// 			label: '是',
							// 			value: 1
							// 		},
							// 		{
							// 			label: '否',
							// 			value: 0
							// 		}
							// 	]
							// },
							{
								disabled: this.isCheck,
								label: '商品权重',
								prop: 'goodsSort',
								formslot: false,
								required: true,
								tip: '权重越小越靠前，最大不超过999',
								tipPlacement: 'right',
								span: 12,
								rules: [{ required: true, message: '必须填写商品权重' }, { required: true, trigger: 'blur', validator: testGoodsSort }]
							}
						]
					}
				]
			},
			goodsClassSpecIds: [], //商品分类id
			templateFreightData: [], //运费模板列表
			storeCateData: [], //店铺分类
			tablelistdata: [], //表格数据
			tabledata: [],
			isFill: false, //是否填充
			parentindex: 0, //选中数据在父级中的下标定位
			childrenindex: 0, //选中数据在当前下标定位
			specSelectData: [],
			productBrandData: [], //商品品牌分类数据
			activeIndex: '0', //导航当前点击下标
			naturalSpecList: [], //自然属性列表
			saleSpecList: [], //销售属性列表
			groupData: {
				//整个商品发布from表单双向绑定数据
				goodsName: '', //商品名称
				goodsBrandId: '', //商品品牌
				choiceType: 0, //商品类型
				goodsPhotos: [], //商品图片
				goodsVideo: [], //商品视频
				goodsPropertyIds: [], //商品自然属性
				inventoryType: 'all', //库存配置 全局配置all   规格配置为spec
				goodsSerial: '', //商品编号
				value: '', //商品规格
				goodsInventory: '', //商品库存
				price: null, //商品价格
				originalPrice: null, //商品原价
				purchasePrice: null, //商品进货价
				userGoodsClassId: '', //店铺分类id
				supplierId: null, //供货商id
				isSelfSupply: 0, //供货方式
				transportId: null, //运费模板
				goodsLength: null, //长度
				goodsWidth: null, //宽度
				goodsHeight: null, //高度
				goodsWeight: null, //重量
				goodsVolumeWeight: null, //体积重量
				storeRecommend: 1, //是否推荐
				goodsSort: null, //商品权重
				//goodsDetails: '', //商品详情
				goodsDetailsH5: '' //商品详情H5
			},
			prospec: {
				goodsInventory: '', //填充库存
				price: '', //填充售卖价格
				originalPrice: '', //填充商品原价
				purchasePrice: '', //填充商品进货价
				goodsSerial: '' //填充商品编码
			},
			groupHeights: [],
			goodsWidthRules: {
				goodsWidth: [
					{
						required: true,
						validator: testGoodsWidth,
						trigger: 'blur'
					}
				]
			}
		};
	},
	watch: {
		tabledata(val) {
			console.log(val);
		},
		'groupData.isSelfSupply'(val) {
			var column = this.optionView.group[5].column[1];
			//切换状态是重置原来选中的运费模板
			this.groupData.transportId = '';
			if (val == 0) {
				column.display = false;
				this.gettemplateFre('');
			} else {
				column.display = true;
				this.groupData.supplierId = '';
				this.templateFreightData = [];
			}
		},
		'groupData.supplierId'(val) {
			if (val != '') {
				this.gettemplateFre(val);
			}
		},
		'groupData.choiceType'(val) {
			var column = this.optionView.group[5].column[2];
			if (val == '0') {
				//实物商品    显示运费模板
				column['display'] = true;
			} else {
				//虚拟商品   隐藏运费模板
				column['display'] = false;
				this.groupData.transportId = '';
			}
		},
		'dialogTableVisible'(val){
			//获取店铺分类
			if(!val){
				this.getStoreCate();
			}
		}
	},
	created() {
		if (this.isPublish) {
			this.editorshow = true;
		} else {
			this.editorshow = false;
		}
		//如果是商品发布或者商品编辑  请求商品分类数据
		if (this.goodsId !== undefined) {
			//根据商品id请求数据
			getProductdata(this.goodsId).then(res => {
				if (res.data.code == 200) {
					let data = res.data.data;
					this.goodsStoreId=data.showData.storeId;
					let arr = [
						data.showData.allExceptSpecList[0].goodsClassOutName,
						data.showData.allExceptSpecList[0].goodsClassInChildName,
						data.showData.allExceptSpecList[0].goodsClassInnerChildName
					];
					this.goodsclassname = arr.join('>>'); //商品类目
					this.goodsClassId = data.showData.allExceptSpecList[0].goodsClassInnerChildId;
					this.groupData.goodsName = data.showData.goodsName; //显示商品名称
					//得到商品分类id去请求商品品牌数据
					this.getGoodsBrand(this.goodsClassId);
					// //获取店铺分类
					//this.getStoreCate();
					//加载运费模板 自供货状态下
					this.groupData.inventoryType = data.showData.inventoryType; //商品配置  全局  规格
					if (data.showData.inventoryType == 'all') {
						this.groupData.goodsInventory = data.showData.skuTableInfo[0].goodsInventory;
						this.groupData.goodsSerial = data.showData.skuTableInfo[0].goodsSerial;
						this.groupData.originalPrice = data.showData.skuTableInfo[0].originalPrice;
						this.groupData.price = data.showData.skuTableInfo[0].price;
						this.groupData.purchasePrice = data.showData.skuTableInfo[0].purchasePrice;
					} else {
						//筛选销售属性选中数据
						if(data.showData.gsptyInfoList){
							this.specSelectData = data.showData.gsptyInfoList.filter(item => {
								//销售属性选中数据
								if (item.specpType == 0) return item;
							});
						}
						//获取全部销售属性
						let allSaleSpec = data.allSpecInfo.filter(item => {
							//销售属性
							if (item.specType == 0) return item;
						});
						//设置销售属性选中状态
						allSaleSpec.forEach(item => {
							item.childrenNodes.forEach(prop => {
								if (this.arrayFn.constansObjByKey(this.specSelectData, prop, 'id')) {
									//对象被选中
									prop.isselected = true;
								} else {
									prop.isselected = false;
								}
							});
						});
						//销售属性选中数据
						this.saleSpecList = allSaleSpec;
						//封装tablelistData
						this.saleSpecList.forEach(item => {
							let arr = item.childrenNodes.filter(prop => {
								if (this.arrayFn.constansObjByKey(this.specSelectData, prop, 'id')) {
									return prop;
								}
							});
							if (arr.length > 0) {
								this.tablelistdata = this.arrayFn.insertAndUpdateObjByKey(
									this.tablelistdata,
									{
										specdata: arr,
										specId: item.id
									},
									'specId'
								);
							}
						});
						//生成规格表格
						this.generateTable();
						this.tabledata.forEach(item => {
							data.showData.skuTableInfo.forEach((prop, idx) => {
								if (this.isTrue(item.ids.split('_'), prop.ids.split('_'))) {
									this.$nextTick(() => {
										this.tabledata[idx]['goodsInventory'] = prop.goodsInventory;
										this.tabledata[idx]['goodsSerial'] = prop.goodsSerial;
										this.tabledata[idx]['originalPrice'] = prop.originalPrice;
										this.tabledata[idx]['price'] = prop.price;
										this.tabledata[idx]['purchasePrice'] = prop.purchasePrice;
									});
								}
							});
						});
					}

					this.groupData.transportId = data.showData.allExceptSpecList[2].transportId;
					this.groupData.supplierId = data.showData.allExceptSpecList[3].supplierId;
					if (this.groupData.supplierId) {
						this.groupData.isSelfSupply = 1;
						setTimeout(() => {
							this.groupData.supplierId = data.showData.allExceptSpecList[3].supplierId;
							this.groupData.transportId = data.showData.allExceptSpecList[2].transportId;
						}, 100);
					} else {
						this.groupData.isSelfSupply = 0;
					}
					this.getsupplierlist();
					this.gettemplateFre(this.groupData.supplierId);
					this.groupData.choiceType = data.showData.choiceType;
					this.groupData.goodsPhotos = data.showData.goodsPhotos; //图片
					this.groupData.goodsVideo = data.showData.goodsVideos; //视频
					this.groupData.goodsLength = data.showData.goodsLength; //长
					this.groupData.goodsWidth = data.showData.goodsWidth; //宽
					this.groupData.goodsHeight = data.showData.goodsHeight; //高
					this.groupData.goodsWeight = data.showData.goodsWeight; //重量
					this.groupData.goodsBrandId = data.showData.allExceptSpecList[1].brandId; //商品品牌
					//this.cabackcontent = data.showData.goodsDetails;
					// this.cabackcontenth5 = data.showData.goodsDetailsH5;
					this.groupData.goodsSort = data.showData.goodsSort;
					this.groupData.storeRecommend = Number(data.showData.storeRecommend);
					this.editorshow = true;
					if (data.showData.userGoodsClass != undefined && data.showData.userGoodsClass != '' && data.showData.userGoodsClass != null) {
						let storearr = [];
						storearr.push(data.showData.userGoodsClass.id, data.showData.userGoodsClass.children[0].id);
						this.value = storearr;
					}

					//获取所有自然属性
					this.naturalSpecList = data.allSpecInfo.filter(item => {
						//自然属性
						if (item.specType == 1) return item;
					});
					if (this.isCheck) {
						this.handleNature(true);
					} else {
						this.handleNature(true);
					}
					//显示的自然属性
					// let gsptyInfoList = data.showData.gsptyInfoList.filter(item => {
					// 	//销售属性
					// 	if (item.specpType == 1) return item;
					// });
					//设置自然属性的回显
					// this.naturalSpecList.forEach((item, index) => {
					// 	gsptyInfoList.forEach(prop => {
					// 		if (item.id == prop.specId) {
					// 			this.groupData[`naturalSelData${index}`] = gsptyInfoList[index].id;
					// 		}
					// 	});
					// });
					// console.log(this.groupData);
				}
			});
			getProductdataInfo(this.goodsId).then(res => {
				//this.cabackcontent = res.data.data.goodsDetails;
				this.cabackcontenth5 = res.data.data.goodsDetailsH5;
			})
		}else{
			//加载供货商列表
			this.getsupplierlist();
			//加载运费模板 自供货状态下
			this.gettemplateFre();
		}
	},
	methods: {
		addsuccess() {
			console.log(`添加运费模成功`);
			this.gettemplateFre(this.groupData.supplierId);
		},
		contentScroll() {
			let scrollTopNum = this.$refs.contentScroll.scrollTop;
			if (scrollTopNum >= 0 && scrollTopNum < 100) {
				this.activeIndex = '0';
			} else if (scrollTopNum >= 100 && scrollTopNum < 363) {
				this.activeIndex = '1';
			} else if (scrollTopNum >= 363 && scrollTopNum < 463) {
				this.activeIndex = '2';
			} else if (scrollTopNum >= 463 && scrollTopNum < 892) {
				this.activeIndex = '3';
			} else if (scrollTopNum >= 892 && scrollTopNum < 1046) {
				this.activeIndex = '4';
			} else if (scrollTopNum >= 1046 && scrollTopNum < 1416) {
				this.activeIndex = '5';
			} else if (scrollTopNum >= 1416 && scrollTopNum < 1746) {
				this.activeIndex = '6';
			}
		},
		keepOnPost() {
			//强制刷新页面
			this.$router.go(0);
		},
		// 判断两个数组是否相等
		isTrue(arr, arr1) {
			if (arr.length !== arr1.length) {
				return false;
			}
			for (let i = 0; i < arr.length; i++) {
				const item = arr[i];
				const item1 = arr1[i];
				if (item['op'] !== item1['op']) {
					return false;
				}
			}
			return true;
		},
		/**
		 * 请求数据相关方法
		 */
		//获取商品品牌
		getGoodsBrand(goodsClassId) {
			getGoodsBrand(goodsClassId).then(res => {
				if (res.data.code == 200) {
					this.productBrandData = [];
					let brand = res.data.data;
					brand.forEach(item => {
						this.productBrandData.push(new Object({ value: item.id, label: item.brandName }));
					});
					this.optionView.group[1].column[1].dicData = this.productBrandData;
				}
			});
		},
		//获取商品属性
		loadClassSpec(goodsClassId) {
			loadClassSpec(goodsClassId).then(res => {
				//在这里过滤出来销售属性和商品属性
				if (res.data.code == 200) {
					//自然属性1  销售属性0
					let data = res.data.data;
					this.naturalSpecList = data.filter(item => {
						//自然属性
						if (item.specType == 1) return item;
					});
					this.saleSpecList = data.filter(item => {
						//销售属性
						if (item.specType == 0) return item;
					});
					this.saleSpecList.forEach(item => {
						item.childrenNodes.forEach(p => {
							p.isselected = false;
						});
					});
					this.handleNature(false);
				}
			});
		},
		handleNature(bool = false) {
			this.naturalSpecList = this.naturalSpecList.map(item => {
				let arr = item.childrenNodes.map(prop => {
					return {
						label: prop.specpValue,
						value: prop.id
					};
				});
				return {
					specName: item.specName,
					id: item.id,
					childrenNodes: arr
				};
			});
			//配置自然属性option
			let group = this.optionView.group[2];
			group.column = [];
			this.naturalSpecList.forEach((item, index) => {
				group.column.push({
					type: 'select',
					label: item.specName,
					dicData: item.childrenNodes,
					suffixIcon: 'el-icon-tickets',
					prefixIcon: 'el-icon-tickets',
					span: 13,
					display: true,
					disabled: bool,
					prop: 'naturalSelData' + index
				});
				this.groupData[`naturalSelData${index}`] = '';
			});
		},

		//获取店铺分类数据
		getStoreCate() {
			this.cascaderoptions=[]
			getStoreCate(this.goodsStoreId).then(res => {
				if (res.data.code == 200) {
					let data = res.data.data;
					data.forEach(item => {
						let obj = {};
						obj.value = item.id;
						obj.label = item.className;
						obj.children = [];
						item.children.forEach(prop => {
							let clilobj = {};
							clilobj.value = prop.id;
							clilobj.label = prop.className;
							obj.children.push(clilobj);
						});
						this.cascaderoptions.push(obj);
					});
				}
			});
		},
		//加载供货商列表
		getsupplierlist() {
			getsupplierlist(this.goodsStoreId).then(res => {
				if (res.data.code == 200) {
					//获取店铺分类
					this.getStoreCate();
					this.optionView.group[5].column[1].dicData = res.data.data.map(item => {
						return { label: item.title, value: item.id };
					});
					//供货商列表
					this.supplierlist = res.data.data.map(item => {
						return { label: item.title, value: item.id };
					});
				}
			});
		},
		//获取运费模板列表
		gettemplateFre(supplierId = '') {
			gettemplateFre(supplierId,this.goodsStoreId).then(res => {
				if (res.data.code == 200) {
					this.templateFreightData = res.data.data;
				}
			});
		},
		/**
		 * 处理页面数据逻辑相关
		 */
		changeclassdata(val) {
			//选择分类回调方法，携带分类id
			this.prospec = {
				goodsInventory: '', //填充库存
				price: '', //填充售卖价格
				originalPrice: '', //填充商品原价
				purchasePrice: '', //填充商品进货价
				goodsSerial: '' //填充商品编码
			};
			this.productBrandData = [];
			this.groupData.goodsBrandId = '';
			this.tabledata = [];
			this.specSelectData = [];
			this.tablelistdata = [];
			this.goodsClassSpecIds = val.goodsClassSpecIds;
			this.goodsclassname = val.str;
			this.goodsClassId = val.code;
			//得到商品分类id去请求商品品牌数据
			this.getGoodsBrand(val.code);
			//获取商品属性
			this.loadClassSpec(val.code);
		},
		handleSelect(el) {
			this.activeIndex = el;
			let scrollDom = document.getElementsByClassName('scrollView')[0];
			let doms = document.getElementsByClassName('avue-group');
			scrollDom.scrollTop = doms[el].offsetTop;
		},
		chooseCategory() {
			//控制选择类目弹窗
			this.$refs.changeGoods.open();
		},
		uploadbtn() {
			//上传图片
			this.$refs.selFile.open();
		},
		selFileCallBack(data) {
			console.log(data);
			let len = data.length;
			let viewLen = this.groupData.goodsPhotos.length;
			console.log(viewLen);
			//选中图片传回的数据
			//最多上传5张照片
			if (len <= 5 - viewLen) {
				this.groupData.goodsPhotos = this.groupData.goodsPhotos.concat(data);
			} else {
				this.$message({
					type: 'warning',
					message: '最多可上传5张图片'
				});
				// this.groupData.goodsPhotos = data;
			}
		},
		uploadVideoBtn() {
			this.$refs.selVideo.open();
		},
		//选择视频回调
		selVideoCallBack(data) {
			//最多上传1个视频
			if (data.length > 1) {
				this.$message({
					type: 'warning',
					message: '最多可上传1个视频'
				});
				return;
			} else {
				this.groupData.goodsVideo = data;
			}
			console.log(this.groupData.goodsVideo);
		},
		//处理上传图片部分js
		arrowLeft(idx) {
			console.log(this.groupData.goodsPhotos);
			//左移动
			if (idx == 0) {
				this.$message.warning('已经第一张了');
			} else {
				let arritem = this.groupData.goodsPhotos.splice(idx, 1);
				this.groupData.goodsPhotos.splice(idx - 1, 0, ...arritem);
			}
		},
		arrowRight(idx) {
			//右移动
			if (idx == this.groupData.goodsPhotos.length - 1) {
				this.$message.warning('已经最后一张了');
			} else {
				let arritem = this.groupData.goodsPhotos.splice(idx, 1);
				this.groupData.goodsPhotos.splice(idx + 1, 0, ...arritem);
			}
		},
		arrowDel(idx) {
			//删除
			this.groupData.goodsPhotos.splice(idx, 1);
		},
		//删除已上传视频
		videoDel(idx) {
			//删除
			this.groupData.goodsVideo.splice(idx, 1);
		},

		choosePic(index, idx) {
			this.parentindex = index;
			this.childrenindex = idx;
			//选择规格图片
			this.$refs.specimg.open();
		},
		specChooseimg(url) {
			//选择规格图片返回的图片链接数据
			this.saleSpecList[this.parentindex].childrenNodes[this.childrenindex].specImageUrl = url[0];
		},
		arrsort(property) {
			return (a, b) => {
				var val1 = a[property];
				var val2 = b[property];
				return val1 - val2;
			};
		},
		handleCheckedChange(index, idx, id, checked) {
			//复选框变化触发事件
			console.log(this.prospec);
			this.prospec = {
				goodsInventory: '', //填充库存
				price: '', //填充售卖价格
				originalPrice: '', //填充商品原价
				purchasePrice: '', //填充商品进货价
				goodsSerial: '' //填充商品编码
			};
			console.log(this.prospec);
			this.parentindex = index;
			this.childrenindex = idx;
			if (checked == true) {
				this.specSelectData = this.arrayFn.insertAndUpdateObjByKey(this.specSelectData, this.saleSpecList[this.parentindex].childrenNodes[this.childrenindex], 'id');
			} else {
				this.specSelectData = this.arrayFn.removeObjByKey(this.specSelectData, this.saleSpecList[this.parentindex].childrenNodes[this.childrenindex], 'id');
			}
			console.log(this.specSelectData);
			this.saleSpecList[this.parentindex].childrenNodes = this.saleSpecList[this.parentindex].childrenNodes.map(item => {
				if (this.arrayFn.constansObjByKey(this.specSelectData, item, 'id')) {
					//对象被选中
					item.isselected = true;
				} else {
					item.isselected = false;
				}
				return item;
			});
			let arr = this.specSelectData.filter(item => {
				return item.specId == id;
			});
			if (arr.length > 0) {
				this.tablelistdata = this.arrayFn.insertAndUpdateObjByKey(
					this.tablelistdata,
					{
						specdata: arr,
						specId: id
					},
					'specId'
				);
			} else {
				this.tablelistdata = this.arrayFn.removeObjByKey(
					this.tablelistdata,
					{
						specdata: arr,
						specId: id
					},
					'specId'
				);
			}
			this.generateTable();
		},
		generateTable() {
			//生成sku表格
			this.tabledata = [];
			let trData = [];
			this.tablelistdata.sort(this.arrsort('specId'));
			if (this.tablelistdata.length > 0) {
				trData = this.generateTable2(trData, '', '', 0);
			}
			if (this.isFill) {
				//已经填充过属性
				trData.forEach(item => {
					for (let prop in item) {
						if (prop == 'value' || prop == 'ids') {
							continue;
						} else {
							item[prop] = this.prospec[prop];
						}
					}
				});
				this.tabledata = trData;
			} else {
				this.tabledata = trData;
			}
		},
		generateTable2(trData, ggName, id, index) {
			//递归生成sku表格
			if (this.tablelistdata.length - 1 <= index) {
				this.tablelistdata[index].specdata.forEach(item => {
					var _ggName;
					var ids;
					if (ggName == '' || id == '') {
						_ggName = item.specpValue;
						ids = item.id;
					} else {
						_ggName = ggName + ',' + item.specpValue;
						ids = id + '_' + item.id;
					}
					var tr = {};
					tr.value = _ggName;
					tr.ids = ids;
					tr.goodsInventory = ''; //商品库存
					tr.price = ''; //商品售卖价格
					(tr.purchasePrice = ''), //进货价
						(tr.originalPrice = ''), //原价
						(tr.goodsSerial = ''), //商品编号
						trData.push(tr);
				});
				return trData;
			} else {
				this.tablelistdata[index].specdata.forEach(item => {
					var _ggName;
					var ids;
					if (ggName == '') {
						_ggName = item.specpValue;
						ids = item.id;
					} else {
						_ggName = ggName + ',' + item.specpValue;
						ids = id + '_' + item.id;
					}
					trData = this.generateTable2(trData, _ggName, ids, index + 1);
				});
				return trData;
			}
		},
		confirmFill() {
			//确认填充
			if (this.tabledata.length == 0) {
				this.$message({
					type: 'warning',
					message: '没有可以被填充的规格！'
				});
				return;
			}

			//当商品库存不为空时，校验商品库存的输入是否合法
			if (this.prospec.goodsInventory != '') {
				//商品库存可以为0
				if (this.prospec.goodsInventory != 0) {
					if (!Number(this.prospec.goodsInventory)) {
						this.$message.error('商品库存数量只能是0-1000000之间的整数');
						return;
					} else {
						const re = /^[0-9]*$/;
						const rsCheck = re.test(this.prospec.goodsInventory);
						if (!rsCheck) {
							this.$message.error('商品库存数量只能是0-1000000之间的整数');
							return;
						} else {
							if (this.prospec.goodsInventory < 0 || this.prospec.goodsInventory > 1000000) {
								this.$message.error('商品库存数量只能是0-1000000之间的整数');
								return;
							}
						}
					}
				} else {
					this.prospec.goodsInventory = 0;
				}
			}
			//当商品价格不为空时，校验输入的价格是否合法
			if (this.prospec.price != '') {
				if (!this.testPriceMethod(this.prospec.price)) {
					this.$message.error('价格/原价/进货价必须是0.01-99999999.99之间的数字');
					return;
				} else {
					if (this.prospec.price == 0) {
						this.prospec.price = 0.00;
					}
				}
			}
			//当商品原价不为空时，检验输入的商品原价是否合法
			if (this.prospec.originalPrice) {
				if (!this.testPriceMethod(this.prospec.originalPrice)) {
					this.$message.error('价格/原价/进货价必须是0.01-99999999.99之间的数字');
					return;
				} else {
					if (this.prospec.originalPrice == 0) {
						this.prospec.originalPrice = 0.00;
					}
				}
			}
			//当商品进货价不为空时，检验输入的商品进货价是否合法
			if (this.prospec.purchasePrice) {
				if (!this.testPriceMethod(this.prospec.purchasePrice)) {
					this.$message.error('价格/原价/进货价必须是0.01-99999999.99之间的数字');
					return;
				} else {
					if (this.prospec.purchasePrice == 0) {
						this.prospec.purchasePrice = 0.00;
					}
				}
			}

			//当商品编号不为空时，检验输入的商品编号是否合法
			if (this.prospec.goodsSerial) {
				// 商品编号也可以为0
				if (this.prospec.goodsSerial != 0) {
					if (!this.prospec.goodsSerial) {
						this.$message.error('商品编号输入不可以为空');
						return;
					} else {
						let newValue = this.prospec.goodsSerial.replace(/\s*/g, '');
						const re = /^[A-Za-z0-9-_\./\u4e00-\u9fa5]{0,50}$/;
						const rsCheck = re.test(newValue);
						if (!rsCheck) {
							this.$message.error('商品编号最多为50个字符');
							return;
						} else {
							this.prospec.goodsSerial = newValue;
						}
					}
				}
			}

			this.tabledata.forEach(item => {
				for (let prop in item) {
					if (prop == 'value' || prop == 'ids') {
						continue;
					} else {
						item[prop] = this.prospec[prop];
					}
				}
			});
			this.$message({
				type: 'success',
				message: '填充成功！'
			});
		},
		//校验价格
		testPriceMethod(value) {
			let flagTest = false;
			if (value != 0) {
				if (!Number(value)) {
					flagTest = false;
				} else {
					const re = /^(0|[1-9][0-9]{0,9})(\.[0-9]{1,2})?$/;
					const rsCheck = re.test(value);
					if (!rsCheck) {
						flagTest = false;
					} else {
						if (value < 0.01 || value > 99999999.99) {
							flagTest = false;
						} else {
							flagTest = true;
						}
					}
				}
			} else {
				flagTest = true;
			}
			return flagTest;
		},

		//校验输入的长，宽，高，重量
		testPropertyMethod(value) {
			let flagPropertyTest = false;

			if (!value) {
				flagPropertyTest = false;
			} else {
				if (!Number(value)) {
					flagPropertyTest = false;
				} else {
					// const re = /^(?!00)(?:[0-9]{1,3}|1000)$/;
					//  const rsCheck = re.test(value);
					//  if (!rsCheck) {
					//      flagPropertyTest = false;
					//  } else {
					//      flagPropertyTest = true;
					//  }
					if (0 < value && value < 1000) {
						flagPropertyTest = true;
					} else {
						flagPropertyTest = false;
					}
				}
			}
			return flagPropertyTest;
		},

		//新增店铺分类
		goodsClassOpen() {
			this.dialogTableVisible = true;
			return false;
		},
		//新增运费模板
		templateFreightHandle() {
			this.$refs.templatefre.open();
		},
		// //商品详情pc
		// getEditcont(val) {
		// 	this.groupData.goodsDetails = val;
		// },
		//商品详情h5
		getEditconth5(val) {
			this.groupData.goodsDetailsH5 = val;
		},
		//提交时再次效验表单
		validateForm() {
			let flag = false;
			this.$refs.obj.validate(valid => {
				if (valid) {
					flag = true;
				}
			});
			return flag;
		},
		getTransType(id){
			//获取运费模板详情
			viewTemplate(id).then(res => {
				if (res.data.code == 200) {
					console.log(res.data.data);
					this.transType = res.data.data.transType;
				}
			});
		},
		handleSubmit() {
			this.submitLoading = true;
			setTimeout(() => {
				this.submitLoading = false;
			}, 1000);
			//选择商品分类
			if (this.goodsclassname == '') {
				this.$message.error('请选择商品分类');
				return;
			}
			if (this.groupData.goodsPhotos.length == 0) {
				this.$message.error('最少上传一张图片');
				return;
			}
			if (this.groupData.choiceType == 0 && (this.groupData.transportId == '' || this.groupData.transportId == null)) {
				this.$message.error('运费模板不能为空');
				return;
			} else if(this.transType == 1&& this.groupData.goodsWeight==null){
				//根据运费模板判断商品属性是否必填
				this.$message.error('商品重量不能为空');
				return;
			}else if (this.transType == 2&&this.goodsVolume == null) {
				this.$message.error('商品体积不能为空');
				return;
			}
			//H5描述不能为空，
			// if (this.groupData.goodsDetails == '' || this.groupData.goodsDetails == null || this.groupData.goodsDetails == undefined) {
			// 	this.$message.error('PC商品描述不能为空');
			// 	return;
			// }

			if (this.groupData.goodsDetailsH5 == '' || this.groupData.goodsDetailsH5 == null || this.groupData.goodsDetailsH5 == undefined) {
				this.$message.error('H5商品描述不能为空');
				return;
			}
			//商品权重
			if (this.groupData.goodsSort == '') {
				this.$message.error('权重不能为空');
				return;
			} else if (parseInt(this.groupData.goodsSort) < 0 || parseInt(this.groupData.goodsSort) > 999) {
				this.$message.error('权重要大于0小于999');
				return;
			}

			//如果输入的有商品属性，长宽高等，也要交验
			if (this.groupData.goodsLength) {
				//如果商品的长输入不为空的话，就校验它
				if (!this.testPropertyMethod(this.groupData.goodsLength)) {
					this.$message.error('商品长度需要大于0小于1000');
					return;
				}
			}

			if (this.groupData.goodsWidth) {
				//如果商品的宽输入不为空的时候，就校验它
				if (!this.testPropertyMethod(this.groupData.goodsWidth)) {
					this.$message.error('商品宽度需要大于0小于1000');
					return;
				}
			}

			if (this.groupData.goodsHeight) {
				//如果商品的高不为空的话，就校验它
				if (!this.testPropertyMethod(this.groupData.goodsHeight)) {
					this.$message.error('商品高度需要大于0小于1000');
					return;
				}
			}

			if (this.groupData.goodsWeight) {
				//如果商品的重量不为空的话，就校验它
				if (!this.testPropertyMethod(this.groupData.goodsWeight)) {
					this.$message.error('商品重量需要大于0小于1000');
					return;
				}
			}

			this.naturalSpecList.forEach((item, index) => {
				this.groupData.goodsPropertyIds.push(this.groupData['naturalSelData' + index]);
			});
			//禁止重复提交
			this.isDisabled = true;
			let AddGoodsFinishParam = {
				goods: {
					id: this.goodsId,
					goodsName: this.groupData.goodsName,
					goodsClassId: this.goodsClassId,
					goodsBrandId: this.groupData.goodsBrandId,
					choiceType: this.groupData.choiceType,
					goodsMainPhotoUrl: this.groupData.goodsPhotos[0],
					supplierId: this.groupData.supplierId, //供货商
					transportId: this.groupData.transportId, //运费模板
					storeRecommend: this.groupData.storeRecommend, //商品推荐
					goodsSort: this.groupData.goodsSort, //权重
					inventoryType: this.groupData.inventoryType, //配置(全局/规格)
					userGoodsClassId: this.value[1] //店铺分类
				},
				value: this.groupData.value, //商品规格
				goodsInventory: this.groupData.goodsInventory, //商品库存
				goodsPhotosArr: this.groupData.goodsPhotos,
				goodsVideoArr: this.groupData.goodsVideo,
				goodsSerial: this.groupData.goodsSerial, //商品编号
				purchasePrice: this.groupData.purchasePrice, //进货价
				originalPrice: this.groupData.originalPrice, //原价
				price: this.groupData.price, //商品价格
				goodsLength: this.groupData.goodsLength, //长
				goodsWidth: this.groupData.goodsWidth, //宽
				goodsHeight: this.groupData.goodsHeight, //高
				goodsVolume: this.goodsVolume, //体积
				goodsWeight: this.groupData.goodsWeight, //重量
				//goodsDetails: this.groupData.goodsDetails, //商品详情
				goodsDetailsH5: this.groupData.goodsDetailsH5, //商品详情H5
				intentoryDetails: this.tabledata, //规格配置
				goodsPropertyIds: this.groupData.goodsPropertyIds,
				goodsClassSpecIds: this.goodsClassSpecIds
			};
			this.$refs['obj'].validate(valid => {
				if (valid) {
					console.log(valid)
					addIntegralGoods(AddGoodsFinishParam).then(res => {
						if (res.data.code == 200) {
							if (this.isPublish == true) {
								this.dialogSuccessVisible = true;
							} else {
								this.$message.success('操作成功！');
								// 发布消息给页面通知操作完成
								this.$EventBus.$emit('finishhandle', true);
							}
						} else {
							this.$EventBus.$emit('finishhandle', false);
							this.$message.error(res.data.message);
						}
					});
				} else {
					this.$message({
						type: 'warning',
						message: '请填写必要信息'
					});
					this.isDisabled = false;
					return false;
				}
			});
		}
	},
	mounted() {
		this.groupHeights = [];
		let doms = document.getElementsByClassName('avue-group');
		for (let i = 0, len = doms.length; i < len; i++) {
			this.groupHeights.push(doms[i].offsetTop);
		}
		//获取浏览器窗口高度
		let clientHeight = document.body.clientHeight; // -114px
		document.getElementById('avue-view').style.height = clientHeight - 114 + 'px';
		document.getElementsByClassName('el-card')[0].style.height = clientHeight - 114 + 'px';
		document.getElementsByClassName('el-card__body')[0].style.height = clientHeight - 114 + 'px';
		document.getElementsByClassName('el-card__body')[0].style.boxSizing = 'border-box';
		let contentHeight = document.getElementById('avue-view').offsetHeight;
		document.getElementsByClassName('scrollView')[0].style.height = contentHeight - 100 + 'px';
		document.getElementsByClassName('scrollView')[0].style.overflowY = 'scroll';
	}
};
</script>
<style lang="scss" scoped>
.checkimg {
	width: 20px;
	height: 20px;
}

.basic-container {
	height: 100%;
	overflow: hidden;
}

.basic-container {
	height: 100%;
}

.el-card__body {
	height: 100%!important;
}

.protitle {
	font-size: 12px;
	color: #606266;
}

.imgContainer {
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	flex-flow: column nowrap;
}

.upload {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.previewPic {
	display: flex;
	justify-content: flex-start;
}

.handlebox {
	width: 100%;
	height: 15px;
	display: flex;
	justify-content: space-around;
}

.tsmsg {
	font-size: 10px;
	color: #999;
	margin: 0px;
	padding-left: 10px;
}

.handlebox img {
	cursor: pointer;
}

.specitem {
	display: flex;
	justify-content: flex-start;
}

.goodsSpecConfig {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	overflow-x: scroll;
}

.specbox {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

.ckeckitem {
	width: calc(100% - 80px);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 0 0 20px;
}

.items {
	display: flex;
	align-items: center;
	min-width: 110px;
	padding: 0 10px;
	box-sizing: border-box;
}

.checkimg {
	width: 16px;
	padding: 0 5px;
	height: 16px;
	object-fit: cover;
	cursor: pointer;
}

table,
th,
td {
	border: 1px solid #dcdfe6;
	vertical-align: middle;
	text-align: center;
}
.spectab {
	width: 140px;
	display: block;
	font-size: 13px;
	line-height: 20px;
	padding: 8px;
}
table tr {
	line-height: 40px;
}

.specsBox {
	height: 30px;
	line-height: 30px;
	border: 0;
	background: transparent;
	text-align: center;
	width: 80px;
}

.storebox {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sizebox {
	display: flex;
	justify-content: flex-start;
	flex: 1;
	flex-wrap: wrap;
}

.fromRow {
	width: 200px;
	display: flex;
	margin-bottom: 10px;
}

.boxSuccess {
	text-align: center;
}

.boxSuccess a {
	border: 0;
	color: #0f88eb;
	outline: none;
}

.boxSuccess a:hover {
	text-decoration: underline;
}

.icon-success {
	color: #0f88eb;
	height: 80px;
	font-size: 80px !important;
	text-align: center;
	vertical-align: middle;
}

.tip-success {
	height: 50px;
	line-height: 40px;
	color: #666;
	font-size: 15px;
	text-align: center;
	padding-bottom: 60px;
}

//视频图片外框
.demo-image__preview {
	padding-top: 15px;
}
.avatar {
	width: 300px;
	height: 300px;
	border: 1px solid #f2f2f2;
}
</style>
